<template>
  <div class="position-upload">
    <div class="section-header">
      <h3>岗位信息上传</h3>
      <p class="section-desc">添加技术岗位信息，关联公司和技术领域</p>
    </div>

    <div class="upload-form">
      <a-form :model="formState" layout="vertical">
        <a-form-item
          label="技术领域"
          name="techField"
          :rules="[{ required: true, message: '请输入岗位名称' }]"
        >
          <a-input
            v-model:value="formState.techField"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择技术领域"
          />
        </a-form-item>

        <a-form-item
          label="岗位名称"
          name="position"
          :rules="[{ required: true, message: '请输入岗位名称' }]"
        >
          <a-input v-model:value="formState.position" placeholder="请输入岗位名称" />
        </a-form-item>

        <a-form-item
          label="所属公司"
          name="company"
          :rules="[{ required: true, message: '请选择所属公司' }]"
        >
          <a-input v-model:value="formState.company" placeholder="请选择所属公司" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary">提交</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>

    <a-divider orientation="left">已添加岗位</a-divider>

    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 5 }"
      :loading="tableLoading"
    >
      <!-- 操作列定义 -->
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <a-button type="primary">操作</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据
const formState = reactive({
  position: '',
  company: undefined,
  techField: [],
})


// 表格列定义
const columns = [
  {
    title: '所属公司',
    dataIndex: 'company',
    //字段
    key: 'company',
  },
  {
    title: '技术领域',
    dataIndex: 'techField',
    //字段
    key: 'techField',
  },
  {
    title: '岗位名称',
    dataIndex: 'position',
    //字段
    key: 'position',
  },
  {
    title: '操作',
    key: 'action',
    width: '150px',
  },
]

// 公司数据
const data = ref([
  {
    company: '阿里巴巴',
    techField: '前端开发',
    position: '前端开发工程师',
  },
  {
    company: '腾讯',
    techField: '前端开发',
    position: '前端开发工程师',
  },
  {
    company: '百度',
    techField: '前端开发',
    position: '前端开发工程师',
  },
  {
    company: '字节跳动',
    techField: '前端开发',
    position: '前端开发工程师',
  },
])

// 表格加载状态
const tableLoading = ref(false)

// 重置表单
const resetForm = () => {
  formState.position = ''
  formState.company = undefined
  formState.techField = []
}
</script>

<style scoped>
.position-upload {
  padding: 0;
}

.section-header {
  margin-bottom: 24px;
}

.section-desc {
  color: rgba(0, 0, 0, 0.45);
  margin-top: 8px;
}
</style>
